import React from 'react';
import {getTopics,fetchTop10} from './service';
import {TopicTitle} from './Topic';
import classNames from 'classnames';

class Topics extends React.Component {

    constructor(props) {
        super(props);
        this.topics = [];
        this.page = props.page || 1;
        this.pageSize = props.pageSize || 20;
        this.state = {
            loading: false
        }
    }

    componentDidMount() {
        const {page, pageSize} = this;
        // getTopics({page:page, limit:pageSize}).then(data =>{
        //     this.topics = data;
        //     this.setState({
        //         loading: true
        //     });
        // });
        fetchTop10().then(data => {
            this.topics = data;
            this.setState({
                loading: true
            });
        });
        
    }
    componentWillUpdate(nextProps) {
        const {page, pageSize} = nextProps;
        getTopics({page:page, limit:pageSize}).then(data =>{
            this.topics = data;
        });
    }

    renderItem = (item) => {
        return <TopicTitle topic={item} key={item.id}/>;
    };

    render() {
        if (!this.state.loading) {
            return <div>loading..</div>;
        }
        return <div>{this.topics.map(this.renderItem)}</div>;
        // return <div><Topic topic={this.topics[0]}/></div>;
    }

}

export default Topics;
